function $(select) {
    return document.querySelector(select)
}

function $$(select) {
    return document.querySelectorAll(select)
}

function width() {
    return document.documentElement.clientWidth
}

function height() {
    return document.documentElement.clientHeight
}


function createCarouselElements(containerId, carouselDatas) {
    var countIndex = 0, //当前页索引
        containerDom = document.getElementById(containerId),
        indicatorDom = containerDom.querySelector(".g_carousel-indicator"),
        listDom = containerDom.querySelector('.g_carousel-list'),
        perv = containerDom.querySelector('.g_carousel-prev'),
        next = containerDom.querySelector('.g_carousel-next');



    function createDom() {
        var listHtml = '', //轮播图中的节点
            indicatorHtml = ''; //指示点
        for (var i = 0; i < carouselDatas.length; i++) {
            var data = carouselDatas[i]
            if (data.link) {
                listHtml += `
            <li>
            <a href="${data.link}" traget='_blank'>
            <img src="${data.image}">
            </a>
            </li>
            `
            } else {
                listHtml += `
            <li>
            <img src="${data.image}">
            </li>
            `
            }
            indicatorHtml += `<li></li>`
        }
        listDom.style.width = `${carouselDatas.length}00%`
        listDom.innerHTML = listHtml
        indicatorDom.innerHTML = indicatorHtml
    };

    function setStatus() {
        // 当前展示页面
        listDom.style.marginLeft = `${-countIndex * width()}px`
        // 圆点状态
        var lis = indicatorDom.children
        var beforeClass = indicatorDom.querySelector('.selected')
        if (beforeClass) {
            beforeClass.classList.remove('selected')
        }
        lis[countIndex].classList.add('selected')
        // 是否可以点击
        if (perv) {
            if (countIndex == 0) {
                perv.classList.add('disabled')
            } else {
                perv.classList.remove('disabled')
            }
        }
        if (next) {
            if (countIndex == carouselDatas.length - 1) {
                next.classList.add('disabled')
            } else {
                next.classList.remove('disabled')
            }
        }
    }
    createDom()
    setStatus()

    function toPrev() {
        if (countIndex == 0) return
        countIndex--
        setStatus()
    }

    function toNext() {
        if (countIndex == carouselDatas.length - 1) return
        countIndex++
        setStatus()
    }

    if (perv) {
        perv.onclick = toPrev
    }
    if (next) {
        next.onclick = toNext
    }

    var timer = null;

    function start() {
        if (timer) return
        timer = setInterval(function () {
            if (countIndex == carouselDatas.length - 1) {
                countIndex = 0
            } else {
                countIndex++
            }

            setStatus()
        }, 2000)
    }

    function stop() {
        clearInterval(timer)
        timer = null
    }
    start()
    containerDom.ontouchstart = function (e) {
        var x = e.changedTouches[0].clientX,
            startTime = Date.now();
        e.stopPropagation(); //阻止事件冒泡
        listDom.style.transition = 'none'
        stop()

        containerDom.ontouchmove = function (e) {
            var dis = e.touches[0].clientX - x
            listDom.style.marginLeft = `${-countIndex * width() + dis}px`
        }
        containerDom.ontouchend = function (e) {
            var dirtime = Date.now() - startTime
            var dis = e.changedTouches[0].clientX - x
            containerDom.ontouchmove = null
            start()
            if (dirtime < 300) {
                if (dis > 20 && countIndex > 0) {
                    toPrev()
                } else if (dis < -20 && countIndex < carouselDatas.length - 1) {
                    toNext()
                } else {
                    setStatus()
                }
            } else {
                if (dis < -width() / 2 && countIndex < carouselDatas.length - 1) {
                    toNext();
                } else if (dis > width() / 2 && countIndex > 0) {
                    toPrev();
                } else {
                    setStatus();
                }
            }

        }
    }
}